<div id="options">
    <div class="row-fluid">
        <div class="span4">
            <label for="language">{{ _( "Language" ) }}</label>
        </div>
        <div class="span3">
            <select id="language">
                <!-- <option value="de_DE">Deutsch</option> -->
                <option value="en_US">English</option>
                <!-- <option value="es_VE">Español</option> -->
                <option value="fa_IR">فارسی</option>
                <!-- <option value="ja_JP">日本語</option> -->
                <option value="zh_CN">简体中文</option>
            </select>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">{{ _( "Auto-Startup" ) }}</div> <!-- .span4 -->
        <div class="span8">
            <input id="auto-start" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span4">{{ _( "Popup Status Page on Startup" ) }}</div> <!-- .span4 -->
        <div class="span8">
            <input id="popup-webui" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span4">{{ _( "Allow Remote" ) }}<a href="https://github.com/XX-net/XX-Net/wiki/AllowRemoteConnectToWebControl" target="_blank">({{ _( "Help" ) }})</a></div> <!-- .span4 -->
        <div class="span8">
            <input id="allow-remote" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span4">{{ _( "Display System Tray(Restarting XX-Net Required)" ) }}</div> <!-- .span4 -->
        <div class="span8">
            <input id="show-systray" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->
    <div class="row-fluid">
        <div class="span4">{{ _( "Run as Green Software" ) }}<a href="https://github.com/XX-net/XX-Net/wiki/%E4%BB%A5%E7%BB%BF%E8%89%B2%E8%BD%AF%E4%BB%B6%E8%BF%90%E8%A1%8C" target="_blank">({{ _( "Help" ) }})</a></div> <!-- .span4 -->
        <div class="span8">
            <input id="no-mess-system" type="checkbox" data-toggle="switch"/>
        </div> <!-- .span8 -->
    </div> <!-- .row-fluid -->

    <div class="row-fluid">
        <div class="span4">
            <label for="modules-manager" class="pull-down-control">
                <i class="icon icon-chevron-right"></i> {{ _( "Module management" ) }}
            </label>
        </div> <!-- .span4 -->
    </div> <!-- .row-fluid -->
    <div id="modules-manager" style="display: none;">
        <hr>
        <div class="row-fluid">
            <div class="span4">{{ _( "Enable" ) }} {{ _( "GAE Proxy" ) }}</div> <!-- .span4 -->
            <div class="span8">
                <input id="gae_proxy-enable" type="checkbox" data-toggle="switch"/> <!--disabled-->
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">{{ _( "Enable" ) }} {{ _( "X-Tunnel" ) }}</div> <!-- .span4 -->
            <div class="span8">
                <input id="x-tunnel-enable" type="checkbox" data-toggle="switch"/>
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <div class="row-fluid">
            <div class="span4">{{ _( "Enable" ) }} {{ _( "Smart Router" ) }}</div> <!-- .span4 -->
            <div class="span8">
                <input id="smart-router-enable" type="checkbox" data-toggle="switch"/>
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <hr>
    </div> <!-- #advanced-options -->
</div> <!-- #options -->

<script type="text/javascript">
    $(function () {
        $('[data-toggle=switch]').wrap('<div class="switch" />').parent().bootstrapSwitch();
    });
</script>
<script type="text/javascript">
    $('.pull-down-control').click(function () {
        var isShown = $('i.icon', this).hasClass('icon-chevron-down');
        var id = $(this).attr('for');

        if (!isShown) {
            $('i.icon', this).removeClass('icon-chevron-right');
            $('i.icon', this).addClass('icon-chevron-down');
            $('#' + id).slideDown();
        } else {
            $('i.icon', this).removeClass('icon-chevron-down');
            $('i.icon', this).addClass('icon-chevron-right');
            $('#' + id).slideUp();
        }
    });
</script>
<script type="text/javascript">
    $(function () {
        getConfig_Init();
    });

    function getConfig_Init() {
        var pageRequests = {
            'cmd': 'get_config'
        };

        $.ajax({
            type: 'GET',
            url: '/config',
            data: pageRequests,
            dataType: 'JSON',
            success: function (result) {
                if (result['auto_start'] != 0) {
                    $("#auto-start").parent().removeClass('switch-off');
                    $("#auto-start").parent().addClass('switch-on');

                    $("#auto-start").prop('checked', true);
                }
                if (result['popup_webui'] != 0) {
                    $("#popup-webui").parent().removeClass('switch-off');
                    $("#popup-webui").parent().addClass('switch-on');

                    $("#popup-webui").prop('checked', true);
                }
                if (result['allow_remote_switch'] != 0) {
                    $("#allow-remote").parent().removeClass('switch-off');
                    $("#allow-remote").parent().addClass('switch-on');

                    $("#allow-remote").prop('checked', true);
                }
                if (result['show_systray'] != 0) {
                    $("#show-systray").parent().removeClass('switch-off');
                    $("#show-systray").parent().addClass('switch-on');

                    $("#show-systray").prop('checked', true);
                }
                if (result['no_mess_system'] != 0) {
                    $("#no-mess-system").parent().removeClass('switch-off');
                    $("#no-mess-system").parent().addClass('switch-on');

                    $("#no-mess-system").prop('checked', true);
                }
                if (result['gae_proxy_enable'] != 0) {
                    $("#gae_proxy-enable").parent().removeClass('switch-off');
                    $("#gae_proxy-enable").parent().addClass('switch-on');

                    $("#gae_proxy-enable").prop('checked', true);
                    $("#gae_proxy-enable").prop('disabled', true);
                    $("#gae_proxy-enable").parent().parent().addClass("deactivate");
                }
                if (result['x_tunnel_enable'] != 0) {
                    $("#x-tunnel-enable").parent().removeClass('switch-off');
                    $("#x-tunnel-enable").parent().addClass('switch-on');

                    $("#x-tunnel-enable").prop('checked', true);
                }
                if (result['smart_router_enable'] != 0) {
                    $("#smart-router-enable").parent().removeClass('switch-off');
                    $("#smart-router-enable").parent().addClass('switch-on');

                    $("#smart-router-enable").prop('checked', true);
                }
                $("#language").val(result['language']);
            },
            error: function () {
                displayErrorMessage();
            }
        });
    }
</script>
<script type="text/javascript">
    $('#language').change(function() {
        var key   = 'language',
            value = $(this).val();

        setConfig(key, value);

        setTimeout(function () {
            location.reload();
        }, 500);
    });

    $('#auto-start').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'auto_start',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#show-systray').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'show_systray',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#no-mess-system').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'no_mess_system',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#popup-webui').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'popup_webui',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#allow-remote').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'allow_remote_switch',
            value     = isChecked ? 1 : 0;

        tip('{{ _( "Restarting all remote, wait to refresh." ) }}', 'info');

        setTimeout(function () {
            location.reload();
        }, 8 * 1000);

        setConfig(key, value);
    });

    $('#gae_proxy-enable').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'gae_proxy_enable',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#x-tunnel-enable').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'x_tunnel_enable',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });

    $('#smart-router-enable').change(function () {
        var isChecked = $(this).is(':checked'),
            key       = 'smart_router_enable',
            value     = isChecked ? 1 : 0;

        setConfig(key, value);
    });
</script>
